<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在线示例 - layui</title>
<meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  
  <link rel="stylesheet" href="../layui/css/layui.css?t=1545041465480"  media="all">
  <link rel="stylesheet" href="../css/global.css?t=1545041465480-6" media="all">
  <!--<script type="text/javascript" src="http://localhost:8088/static/online/js/jquery.htmlClean.js"></script>-->
</head>
<body>
<div class="layui-layout layui-layout-admin">
  

<!--<div class="layui-header header header-demo" winter>-->
  <!--<div class="layui-main">-->
    <!--<a class="logo" href="/">-->
      <!--<img src="../img/default/logo.png" alt="layui">-->
    <!--</a>-->
    <!--<div class="layui-form component" lay-filter="LAY-site-header-component"></div>-->
    <!--<ul class="layui-nav">-->
      <!--<li class="layui-nav-item ">-->
        <!--<a href="/doc/">文档&lt;!&ndash; <span class="layui-badge-dot"></span> &ndash;&gt;</a> -->
      <!--</li>-->
      <!--<li class="layui-nav-item layui-this">-->
        <!--<a href="/demo/">示例&lt;!&ndash;  &ndash;&gt;</a>-->
      <!--</li>-->
      <!---->
      <!---->
      <!---->
      <!---->
      <!--<li class="layui-nav-item layui-hide-xs">-->
        <!--<a href="//fly.layui.com/" target="_blank">社区</a>-->
      <!--</li>-->
      <!---->
      <!--<li class="layui-nav-item">-->
        <!--<a href="javascript:;"><span class="layui-badge-dot" style="margin: -5px 0 0 -15px;"></span>周边</a>-->
        <!--<dl class="layui-nav-child">-->
          <!--<dd lay-unselect>-->
            <!--<a href="//fly.layui.com/extend/" target="_blank">扩展组件</a>-->
          <!--</dd>-->
          <!--<dd lay-unselect>-->
            <!--<a href="//fly.layui.com/store/" target="_blank">模板市场 <span class="layui-badge-dot"></span></a>-->
            <!--<hr>-->
          <!--</dd>-->
          <!---->
          <!--<dd class="layui-hide-sm layui-show-xs" lay-unselect>-->
            <!--<a href="//fly.layui.com/" target="_blank">社区交流</a>-->
            <!--<hr>-->
          <!--</dd>-->
          <!--<dd lay-unselect><a href="/admin/" target="_blank">后台模板</a></dd>-->
          <!--<dd lay-unselect><a href="/layim/" target="_blank">即时聊天</a><hr></dd>-->
          <!---->
          <!--<dd lay-unselect><a href="/alone.html" target="_blank" lay-unselect>独立组件</a></dd>-->
          <!--<dd lay-unselect><a href="https://fly.layui.com/jie/24209/" target="_blank">Axure 组件</a></dd>-->
        <!--</dl>-->
      <!--</li>-->
      <!---->
      <!--<li class="layui-nav-item layui-hide-xs" lay-unselect>-->
        <!--<a href="/admin/">后台模板<span class="layui-badge-dot" style="margin-top: -5px;"></span></a>-->
      <!--</li>-->
    <!--</ul>-->
  <!--</div>-->
<!--</div>-->
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]--> 
  <!--<div class="layui-side layui-bg-black">-->
    <!--<div class="layui-side-scroll">-->
      <!---->
<!--<ul class="layui-nav layui-nav-tree site-demo-nav">-->
  <!---->
  <!--<li class="layui-nav-item layui-nav-itemed">-->
    <!--<a class="javascript:;" href="javascript:;">开发工具</a>-->
    <!--<dl class="layui-nav-child">-->
      <!--<dd>-->
        <!--<a href="/demo/">调试预览</a>-->
      <!--</dd>-->
    <!--</dl>-->
  <!--</li>-->
  <!---->
  <!--<li class="layui-nav-item layui-nav-itemed">-->
    <!--<a class="javascript:;" href="javascript:;">布局</a>-->
    <!--<dl class="layui-nav-child">-->
      <!--<dd class="">-->
        <!--<a href="/demo/grid.html">栅格</a>-->
      <!--</dd>-->
      <!--<dd class="">-->
        <!--<a href="/demo/admin.html">后台布局</a>-->
      <!--</dd>-->
    <!--</dl>-->
  <!--</li>-->
  <!---->
  <!--<li class="layui-nav-item layui-nav-itemed">-->
    <!--<a class="javascript:;" href="javascript:;">基本元素</a>-->
    <!--<dl class="layui-nav-child">-->
      <!--<dd class="">-->
        <!--<a href="/demo/button.html">按钮</a>-->
      <!--</dd>-->
      <!--<dd class="">-->
        <!--<a href="/demo/form.html">表单</a>-->
      <!--</dd>-->
      <!--<dd class="">-->
        <!--<a href="/demo/nav.html">导航/面包屑</a>-->
      <!--</dd>-->
      <!--<dd class="">-->
        <!--<a href="/demo/tab.html">选项卡</a>-->
      <!--</dd>-->
      <!--<dd class="">-->
        <!--<a href="/demo/progress.html">进度条</a>-->
      <!--</dd>-->
      <!--<dd class="">-->
        <!--<a href="/demo/panel.html">面板</a>-->
      <!--</dd>-->
      <!--<dd class="">-->
        <!--<a href="/demo/badge.html">徽章</a>-->
      <!--</dd>-->
      <!--<dd class="">-->
        <!--<a href="/demo/timeline.html">时间线</a>-->
      <!--</dd>-->
      <!--<dd class="">-->
        <!--<a href="/demo/table-element.html">静态表格</a>-->
      <!--</dd>-->
      <!--<dd class="">-->
        <!--<a href="/demo/anim.html">动画</a>-->
      <!--</dd>-->
      <!--<dd class="">-->
        <!--<a href="/demo/auxiliar.html">辅助元素</a>-->
      <!--</dd>-->
    <!--</dl>-->
  <!--</li>-->
  <!---->
  <!--<li class="layui-nav-item layui-nav-itemed">-->
    <!--<a class="javascript:;" href="javascript:;">组件示例</a>-->
    <!--<dl class="layui-nav-child">-->
      <!--<dd class="">-->
        <!--<a href="/demo/layer.html">-->
          <!--弹出层-->
        <!--</a>-->
      <!--</dd>-->
      <!--<dd class="">-->
        <!--<a href="/demo/laydate.html">-->
          <!--日期与时间选择-->
        <!--</a>-->
      <!--</dd>-->
      <!--<dd class="">-->
        <!--<a href="/demo/layim.html">-->
          <!--即时通讯-->
        <!--</a>-->
      <!--</dd>-->
      <!--<dd class="">-->
        <!--<a href="/demo/table.html">-->
          <!--数据表格-->
        <!--</a>-->
      <!--</dd>-->
       <!--<dd class="">-->
        <!--<a href="/demo/laypage.html">-->
          <!--分页-->
        <!--</a>-->
      <!--</dd>-->
      <!--<dd class="">-->
        <!--<a href="/demo/upload.html">-->
          <!--文件上传-->
        <!--</a>-->
      <!--</dd>-->
      <!---->
      <!--<dd class="">-->
        <!--<a href="/demo/colorpicker.html">-->
          <!--颜色选择器-->
        <!--</a>-->
      <!--</dd>-->
      <!--<dd class="">-->
        <!--<a href="/demo/slider.html">-->
          <!--滑块-->
        <!--</a>-->
      <!--</dd>-->
      <!--<dd class="">-->
        <!--<a href="/demo/rate.html">-->
          <!--评分-->
        <!--</a>-->
      <!--</dd>-->
      <!--<dd class="">-->
        <!--<a href="/demo/carousel.html">-->
          <!--轮播-->
        <!--</a>-->
      <!--</dd>-->
      <!--<dd class="">-->
        <!--<a href="/demo/laytpl.html">-->
          <!--模板引擎-->
        <!--</a>-->
      <!--</dd>-->
      <!--<dd class="">-->
        <!--<a href="/demo/flow.html">-->
          <!--流加载-->
        <!--</a>-->
      <!--</dd>-->
      <!--<dd class="">-->
        <!--<a href="/demo/util.html">-->
          <!--工具集-->
        <!--</a>-->
      <!--</dd>-->
      <!--<dd class="">-->
        <!--<a href="/demo/code.html">-->
          <!--代码修饰器-->
        <!--</a>-->
      <!--</dd>-->
    <!--</dl>-->
  <!--</li>-->
  <!---->
  <!--<li class="layui-nav-item" style="height: 30px; text-align: center"></li>-->
<!--</ul>-->

    <!--</div>-->
  <!--</div>-->


  <div class="layui-body site-demo" style="left:0px;top:0px;">
    <form id="LAY_demoForm" target="LAY_demo" method="post">
    <div class="site-demo-editor" id="site-demo-editor">
      <div class="site-demo-area">
        <textarea id="LAY_editor" spellcheck="true" placeholder="在此处输入代码">
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>layui在线调试</title>
  <link rel="stylesheet" href="http://localhost:8088/static/online/css/layui.css" media="all">
      <link rel="stylesheet" href="http://localhost:8088/static/vipadmin/css/global.css?t=1545041465480-6" media="all">
      <link rel="stylesheet" href="http://localhost:8088/static/vipadmin/css/app.css?t=1545041465480-6" media="all">
  <!--<link rel="stylesheet" href="http://localhost:8088/static/vipadmin/css/code/layout.css?t=1545041465480" media="all">-->
<!--<link href="http://localhost:8088/static/online/css/layoutit.css" rel="stylesheet">-->
<link href="http://localhost:8088/static/online/css/layoutit1.css" rel="stylesheet">
<!--<link href="http://localhost:8088/static/online/css/layuionline.css" rel="stylesheet">-->
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<link href="http://localhost:8088/static/online/css/bootstrap-combined1.min.css" rel="stylesheet">
    	<script type="text/javascript" src="http://localhost:8088/static/online/js/jquery-2.0.0.min.js"></script>

   <script type="text/javascript" src="http://localhost:8088/static/online/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="http://localhost:8088/static/online/js/jquery-ui.js"></script>


	<script type="text/javascript" src="http://localhost:8088/static/online/js/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="http://localhost:8088/static/online/js/jquery.htmlClean.js"></script>
<!--<script type="text/javascript" src="http://localhost:8088/static/online/ckeditor/ckeditor.js"></script>-->
<!--<script type="text/javascript" src="http://localhost:8088/static/online/ckeditor/config.js"></script>-->
<!--<script type="text/javascript" src="http://localhost:8088/static/online/js/scripts.js"></script>-->
<script type="text/javascript" src="http://localhost:8088/static/online/js/scripts2.js"></script>
  <style>
    /*body{margin: 10px;}*/
    body{margin: 0px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
    /* 为了区分效果 */
    div[carousel-item]>*{text-align: center; line-height: 280px; color: #fff;}
    div[carousel-item]>*:nth-child(2n){background-color: #009688;}
    div[carousel-item]>*:nth-child(2n+1){background-color: #5FB878;}
    #test2 div[carousel-item]>*{line-height: 120px;}
  </style>
</head>
<!--style="min-height: 192px; cursor: auto;" class="edit"-->
<body class="edit">


<div class="layui-header header header-demo" winter>
  <div class="layui-main">
    <a class="logo" href="/">
      <img src="//res.layui.com/static/images/layui/logo.png" alt="layui">
    </a>
    <div class="layui-form component" lay-filter="LAY-site-header-component"></div>
    <ul class="layui-nav">
      <button class="layui-btn layui-btn-radius layui-btn-primary" id="edit" title="编辑"><i class="vip-icon">&#xe65c;</i>编辑</button>
  <button class="layui-btn layui-btn-radius layui-btn-primary" id="devpreview" title="布局编辑"><i class="vip-icon">&#xe664;</i>布局编辑</button>
  <button class="layui-btn layui-btn-radius layui-btn-primary" id="sourcepreview" title="预览"><i class="vip-icon">&#xe68a;</i>预览</button>
  <button class="layui-btn layui-btn-radius layui-btn-primary" id="downloadModal" title="预览"><i class="vip-icon">&#xe68a;</i>预览</button>



      <li class="layui-nav-item ">
        <a href="/doc/">文档<!-- <span class="layui-badge-dot"></span> --></a>
      </li>
      <li class="layui-nav-item layui-this">
        <a href="/demo/">示例<!--  --></a>
      </li>




      <li class="layui-nav-item layui-hide-xs">
        <a href="//fly.layui.com/" target="_blank">社区</a>
      </li>

      <li class="layui-nav-item">
        <a href="javascript:;"><span class="layui-badge-dot" style="margin: -5px 0 0 -15px;"></span>周边</a>
        <dl class="layui-nav-child">
          <dd lay-unselect>
            <a href="//fly.layui.com/extend/" target="_blank">扩展组件</a>
          </dd>
          <dd lay-unselect>
            <a href="//fly.layui.com/store/" target="_blank">模板市场 <span class="layui-badge-dot"></span></a>
            <hr>
          </dd>

          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
            <a href="//fly.layui.com/" target="_blank">社区交流</a>
            <hr>
          </dd>
          <dd lay-unselect><a href="/admin/" target="_blank">后台模板</a></dd>
          <dd lay-unselect><a href="/layim/" target="_blank">即时聊天</a><hr></dd>

          <dd lay-unselect><a href="/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
          <dd lay-unselect><a href="https://fly.layui.com/jie/24209/" target="_blank">Axure 组件</a></dd>
        </dl>
      </li>

      <li class="layui-nav-item layui-hide-xs" lay-unselect>
        <a href="/admin/">后台模板<span class="layui-badge-dot" style="margin-top: -5px;"></span></a>
      </li>
    </ul>
  </div>
</div>


<!--主窗体-->
<div class="container-fluid">

<!--左侧导航(拖拽源)layui-side layui-side-scroll-->
    <div class="">
        <div class="layui-side layui-bg-black">
<div class="">

<ul class="layui-nav layui-nav-tree site-demo-nav sidebar-nav">

<li class="layui-nav-item layui-nav-itemed">
<!--javascript:;-->
<a class="lyrowtest" href="javascript:;" style="padding: 0 20px;">布局</a>
    <!--<li style="display: list-item" class="rows" id="estRows">-->
<dl class="layui-nav-child">
<!--<dd class="">-->
<!--<a href="/demo/grid.html">栅格</a>-->
<!--</dd>-->
<dd class="">

    <div class="lyrow ui-draggable lyrowtest">
        <a href="#close" class="remove label label-important">
            <i class="icon-remove icon-white"></i>删除</a>
        <span class="drag label"><i class="icon-move"></i>拖动</span>
        <div class="preview" data-row="row">
          <input value="12" type="text">
        </div>
        <div class="view">
            <div class="row-fluid clearfix layui-row">
              <div class="layui-col-md12 column"></div>
            </div>
        </div>
    </div>
</dd>
<dd class="">
        <div class="lyrow ui-draggable lyrowtest">
        <a href="#close" class="remove label label-important">
            <i class="icon-remove icon-white"></i>删除</a>
        <span class="drag label"><i class="icon-move"></i>拖动</span>
        <div class="preview" data-row="row">
          <input value="6 6" type="text">
        </div>
        <div class="view">
            <div class="row-fluid clearfix layui-row">
               <div class="layui-col-md6 column"></div>
               <div class="layui-col-md6 column"></div>
            </div>
        </div>
    </div>
</dd>
<dd class="">
    <div class="lyrow ui-draggable lyrowtest">
        <a href="#close" class="remove label label-important">
            <i class="icon-remove icon-white"></i>删除</a>
        <span class="drag label"><i class="icon-move"></i>拖动</span>
        <div class="preview" data-row="row">
          <input value="8 4" type="text">
        </div>
        <div class="view">
            <div class="row-fluid clearfix layui-row">
               <div class="layui-col-md8 column"></div>
               <div class="layui-col-md4 column"></div>
            </div>
        </div>
    </div>

</dd>

</dl>
</li>

<li class="layui-nav-item layui-nav-itemed">
<a class="lyrowtest" href="javascript:;">基本元素</a>
<dl class="layui-nav-child">
<dd class="">
<div class="box box-element ui-draggable lyrowtest">
   <a href="#close" class="remove label label-important"> <i class="icon-remove icon-white"></i>删除</a>
   <span class="drag label"><i class="icon-move"></i>拖动</span>
   <div class="preview">按钮</div>
   <div class="view" contenteditable="true">
    <button class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>
   </div>
  </div>
</dd>

<dd class="">
<div class="box box-element ui-draggable lyrowtest">
   <a href="#close" class="remove label label-important"> <i class="icon-remove icon-white"></i>删除</a>
   <span class="drag label"><i class="icon-move"></i>拖动</span>
   <div class="preview">进度条</div>
   <div class="view" contenteditable="true">
       <div class="layui-progress">
           <div class="layui-progress-bar layui-bg-blue" lay-percent="50%"></div>
       </div>
   </div>
  </div>
</dd>


<dd class="">
<div class="box box-element ui-draggable lyrowtest">
   <a href="#close" class="remove label label-important"> <i class="icon-remove icon-white"></i>删除</a>
   <span class="drag label"><i class="icon-move"></i>拖动</span><span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button> <span class="btn-group"> <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">对齐 <span class="caret"></span></a>
<ul class="dropdown-menu">
                <li class="active"><a href="#" rel="">默认</a></li>
                <li class=""><a href="#" rel="text-left">靠左</a></li>
                <li class=""><a href="#" rel="text-center">居中</a></li>
                <li class=""><a href="#" rel="text-right">靠右</a></li>
              </ul>
              </span> <span class="btn-group"> <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">标记 <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li class="active"><a href="#" rel="">默认</a></li>
                <li class=""><a href="#" rel="muted">禁用</a></li>
                <li class=""><a href="#" rel="text-warning">警告</a></li>
                <li class=""><a href="#" rel="text-error">错误</a></li>
                <li class=""><a href="#" rel="text-info">提示</a></li>
                <li class=""><a href="#" rel="text-success">成功</a></li>
              </ul>
              </span> </span>
    <div class="preview">按钮组</div>
   <div class="view" contenteditable="true">
       <div class="layui-row vip-btn-tool-box">
       <div class="layui-col-sm12 layui-col-md6 layui-btn-container">
         <button class="layui-btn layui-btn-radius layui-btn-primary" id="vip-btn-add" title="新增"><i class="vip-icon">&#xe65c;</i></button>
         <button class="layui-btn layui-btn-radius layui-btn-primary" id="vip-btn-del" title="删除"><i class="vip-icon">&#xe664;</i></button>
         <button class="layui-btn layui-btn-radius layui-btn-primary" id="vip-btn-refresh" title="刷新"><i class="vip-icon">&#xe68a;</i></button>
         <button class="layui-btn layui-btn-radius layui-btn-primary" id="vip-btn-synchronous" title="同步"><i class="vip-icon">&#xe69c;</i></button>
        </div>
       </div>
   </div>
  </div>
</dd>

<dd class="">
<div class="box box-element ui-draggable lyrowtest">
   <a href="#close" class="remove label label-important"> <i class="icon-remove icon-white"></i>删除</a>
   <span class="drag label"><i class="icon-move"></i>拖动</span><span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button> <span class="btn-group"> <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">对齐 <span class="caret"></span></a>
<ul class="dropdown-menu">
                <li class="active"><a href="#" rel="">默认</a></li>
                <li class=""><a href="#" rel="text-left">靠左</a></li>
                <li class=""><a href="#" rel="text-center">居中</a></li>
                <li class=""><a href="#" rel="text-right">靠右</a></li>
              </ul>
              </span> <span class="btn-group"> <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">标记 <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li class="active"><a href="#" rel="">默认</a></li>
                <li class=""><a href="#" rel="muted">禁用</a></li>
                <li class=""><a href="#" rel="text-warning">警告</a></li>
                <li class=""><a href="#" rel="text-error">错误</a></li>
                <li class=""><a href="#" rel="text-info">提示</a></li>
                <li class=""><a href="#" rel="text-success">成功</a></li>
              </ul>
              </span> </span>
    <div class="preview">表格</div>
   <div class="view" contenteditable="true">
       <!--layui-hide-->
       <!--<table class="" id="demo4" lay-filter="test"></table>-->


        <table class="layui-table" id="demoTable" lay-filter="test">
    <colgroup>
      <col width="150">
      <col width="150">
      <col width="200">
      <col>
    </colgroup>
    <thead>
      <tr>
        <th>人物</th>
        <th>民族</th>
        <th>出场时间</th>
        <th>格言</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>贤心</td>
        <td>汉族</td>
        <td>1989-10-14</td>
        <td>人生似修行</td>
      </tr>
      <tr>
        <td>张爱玲</td>
        <td>汉族</td>
        <td>1920-09-30</td>
        <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
      </tr>
      <tr>
        <td>Helen Keller</td>
        <td>拉丁美裔</td>
        <td>1880-06-27</td>
        <td> Life is either a daring adventure or nothing.</td>
      </tr>
      <tr>
        <td>岳飞</td>
        <td>汉族</td>
        <td>1103-北宋崇宁二年</td>
        <td>教科书再滥改，也抹不去“民族英雄”的事实</td>
      </tr>
      <tr>
        <td>孟子</td>
        <td>华夏族（汉族）</td>
        <td>公元前-372年</td>
        <td>猿强，则国强。国强，则猿更强！ </td>
      </tr>
    </tbody>
  </table>

   </div>
  </div>
</dd>




    <dd class="">
<div class="box box-element ui-draggable lyrowtest">
   <a href="#close" class="remove label label-important"> <i class="icon-remove icon-white"></i>删除</a>
   <span class="drag label"><i class="icon-move"></i>拖动</span>
   <div class="preview">轮播图</div>
   <div class="view" contenteditable="true">
        <div class="layui-carousel" id="myCarousel" lay-filter="test4">
            <div carousel-item="">
               <div>条目1</div>
               <div>条目2</div>
               <div>条目3</div>
               <div>条目4</div>
               <div>条目5</div>
            </div>
        </div>
   </div>
  </div>
</dd>

    <dd class="">
<div class="box box-element ui-draggable lyrowtest">
   <a href="#close" class="remove label label-important"> <i class="icon-remove icon-white"></i>删除</a>
   <span class="drag label"><i class="icon-move"></i>拖动</span>
   <div class="preview">导航</div>
   <div class="view" contenteditable="true">
        <ul class="layui-nav">
  <li class="layui-nav-item"><a href="">最新活动</a></li>
  <li class="layui-nav-item layui-this">
    <a href="javascript:;">产品</a>
    <dl class="layui-nav-child">
      <dd><a href="">选项1</a></dd>
      <dd><a href="">选项2</a></dd>
      <dd><a href="">选项3</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="">大数据</a></li>
  <li class="layui-nav-item">
    <a href="javascript:;">解决方案</a>
    <dl class="layui-nav-child">
      <dd><a href="">移动模块</a></dd>
      <dd><a href="">后台模版</a></dd>
      <dd class="layui-this"><a href="">选中项</a></dd>
      <dd><a href="">电商平台</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="">社区</a></li>
</ul>
   </div>
  </div>
</dd>

</dl>
</li>

<li class="layui-nav-item" style="height: 30px; text-align: center"></li>
    <div style="clear:both;"></div>
</ul>

</div>
</div>
    </div>
    <!--拖拽目的地容器-->
    <div style="min-height:590px;left:200px;" class="demo ui-sortable">

<!--<div class="layui-fluid">-->
    <!--<div class="layui-row layui-col-space15">-->
        <!--<div class="layui-col-md6">-->
            <!--&lt;!&ndash;<div class="row-fluid clearfix">&ndash;&gt;-->
                  <!--&lt;!&ndash;&lt;!&ndash;<div class="span12 column ui-sortable"></div>&ndash;&gt;&ndash;&gt;-->
            <!--&lt;!&ndash;</div>&ndash;&gt;-->

        <!--</div>-->
        <!--<div class="layui-col-md6 ui-sortable">-->

<!-- 表格工具栏 -->
<!--<div class="layui-row vip-btn-tool-box">-->
<!--<div class="layui-col-sm12 layui-col-sm4 layui-col-md4 layui-btn-container">-->
  <!--<button class="layui-btn layui-btn-radius layui-btn-primary" id="vip-btn-add" title="新增"><i class="vip-icon">&#xe65c;</i></button>-->
  <!--<button class="layui-btn layui-btn-radius layui-btn-primary" id="vip-btn-del" title="删除"><i class="vip-icon">&#xe664;</i></button>-->
  <!--<button class="layui-btn layui-btn-radius layui-btn-primary" id="vip-btn-refresh" title="刷新"><i class="vip-icon">&#xe68a;</i></button>-->
  <!--<button class="layui-btn layui-btn-radius layui-btn-primary" id="vip-btn-synchronous" title="同步"><i class="vip-icon">&#xe69c;</i></button>-->
 <!--</div>-->
                    <!--</div>-->
<!--<table class="layui-hide" id="demo4" lay-filter="test"></table>-->

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


        </div>
<input type="hidden" id="html_id_table_id"/>
<input type="hidden" id="html_id_button_id"/>
<input type="hidden" id="html_id_progress-bar_id"/>
<input type="hidden" id="html_id_carousel_id"/>
    </div>
<!--下载代码区-->
    <div id="download-layout">
      <div class="container-fluid"></div>
    </div>


<script type="text/javascript" src="http://localhost:8088/static/vipadmin/layui/layui.js"></script>
<script>
     var carouselMap = new Map();
layui.config({
  version: '1545041465480' //为了更新 js 缓存，可忽略
});
window.global = {
    pageType: 'demo'
    ,preview: function(){
        var preview = document.getElementById('LAY_preview');
        return preview ? preview.innerHTML : '';
    }()
};
layui.config({base: 'http://localhost:8088/static/vipadmin/js/'}).use(['laydate','laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function(){
  var laydate = layui.laydate //日期
  ,laypage = layui.laypage //分页
  ,layer = layui.layer //弹层
  ,table = layui.table //表格
  ,carousel = layui.carousel //轮播
  ,upload = layui.upload //上传
  ,element = layui.element //元素操作
  ,slider = layui.slider //滑块
  ,$ = layui.jquery //
  //向世界问个好
  layer.msg('Hello World');

    //设定各种参数
    var ins2 = carousel.render({
        elem: '#myCarousel'
    });
    var ins3;



  //监听Tab切换
  element.on('tab(demo)', function(data){
    layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {
      tips: 1
    });
  });


    function createTable(){
//执行一个 table 实例
        table.render({
            "elem": '#demo4'
            ,height: 420
            ,url: '/static/vipadmin/json/demo-table-user-run-html.json' //数据接口
            ,title: '用户表'
            ,page: true //开启分页
            ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            ,totalRow: true //开启合计行
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计：'}
                ,{field: 'username', title: '用户名', width:80}
                ,{field: 'experience', title: '积分', width: 90, sort: true, totalRow: true}
                ,{field: 'sex', title: '性别', width:80, sort: true}
                ,{field: 'score', title: '评分', width: 80, sort: true, totalRow: true}
                ,{field: 'city', title: '城市', width:150}
                ,{field: 'sign', title: '签名', width: 200}
                ,{field: 'classify', title: '职业', width: 100}
                ,{field: 'wealth', title: '财富', width: 135, sort: true, totalRow: true}
                ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
            ]]
        });

        //监听头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
            switch(obj.event){
                case 'add':
                    layer.msg('添加');
                    break;
                case 'update':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else if(data.length > 1){
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                    }
                    break;
                case 'delete':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else {
                        layer.msg('删除');
                    }
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
                layer.msg('查看操作');
            } else if(layEvent === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){
                layer.msg('编辑操作');
            }
        });
    }









  //执行一个轮播实例
  carousel.render({
    elem: '#test1'
    ,width: '100%' //设置容器宽度
    ,height: 200
    ,arrow: 'none' //不显示箭头
    ,anim: 'fade' //切换动画方式
  });

  //将日期直接嵌套在指定容器中
  var dateIns = laydate.render({
    elem: '#laydateDemo'
    ,position: 'static'
    ,calendar: true //是否开启公历重要节日
    ,mark: { //标记重要日子
      '0-10-14': '生日'
      ,'2018-08-28': '新版'
      ,'2018-10-08': '神秘'
    }
    ,done: function(value, date, endDate){
      if(date.year == 2017 && date.month == 11 && date.date == 30){
        dateIns.hint('一不小心就月底了呢');
      }
    }
    ,change: function(value, date, endDate){
      layer.msg(value)
    }
  });

  //分页
  laypage.render({
    elem: 'pageDemo' //分页容器的id
    ,count: 100 //总页数
    ,skin: '#1E9FFF' //自定义选中色值
    //,skip: true //开启跳页
    ,jump: function(obj, first){
      if(!first){
        layer.msg('第'+ obj.curr +'页', {offset: 'b'});
      }
    }
  });

  //上传
  upload.render({
    elem: '#uploadDemo'
    ,url: '' //上传接口
    ,done: function(res){
      console.log(res)
    }
  });

  slider.render({
    elem: '#sliderDemo'
    ,input: true //输入框
  });

  //底部信息
  // var footerTpl = lay('#footer')[0].innerHTML;
  // lay('#footer').html(layui.laytpl(footerTpl).render({}))
  // .removeClass('layui-hide');


    $('body').delegate('#vip-btn-add','click', function (e) {
        layer.alert("新增按钮");
    });

    $('#edit').on('contextmenu', function (e) {

        layer.alert("右键点击");

    });


    $('body').delegate('#vip-btn-synchronous','contextmenu', function (e) {
// $('#vip-btn-synchronous').on('contextmenu', function (e) {
    // var e=$(this);
    //判断，如果存在右键菜单的div，则移除，保存页面上只存在一个
    if ($(document).find('div.admin-contextmenu').length > 0) {
        $(document).find('div.admin-contextmenu').remove();
    }
    //创建一个div
    var div = document.createElement('div');
    //设置一些属性
    div.className = 'admin-contextmenu';
    div.style.width = '130px';
    div.style.backgroundColor = 'white';

    var ul = '<ul>';
    ul += '<li data-target="refresh" title="刷新"><i class="fa fa-refresh" aria-hidden="true"></i> 刷新</li>';
    ul += '<li data-target="ssss" title="绑定数据源"><i class="fa fa-refresh" aria-hidden="true"></i> 绑定数据源</li>';
    ul += '<li data-target="closeCurrent" title="关闭当前选项卡"><i class="fa fa-close" aria-hidden="true"></i> 关闭当前</li>';
    ul += '<li data-target="closeOther" title="关闭其他选项卡"><i class="fa fa-window-close-o" aria-hidden="true"></i> 关闭其他</li>';
    ul += '<li data-target="closeAll" title="关闭全部选项卡"><i class="fa fa-window-close-o" aria-hidden="true"></i> 全部关闭</li>';
    ul += '<li data-target="closeAlldddd" title="刷新页面"><i class="fa fa-window-close-o" aria-hidden="true"></i> 全部关闭</li>';
    ul += '</ul>';
    div.innerHTML = ul;
    div.style.top = e.pageY + 'px';
    div.style.left = e.pageX + 'px';
    //将dom添加到body的末尾
    document.getElementsByTagName('body')[0].appendChild(div);

    //获取当前点击选项卡的id值
    // var id = $($target).find('i.layui-tab-close').data('id');
    //获取当前点击选项卡的索引值
    // var clickIndex = $($target).attr('lay-id');
    var $context = $(document).find('div.admin-contextmenu');
    if ($context.length > 0) {
        $context.eq(0).children('ul').children('li').each(function () {
            var $that = $(this);
            //绑定菜单的点击事件
            $that.on('click', function () {
                //获取点击的target值
                var target = $that.data('target');
                //
                switch (target) {
                    case 'refresh': //刷新当前
                        // var src = ELEM.contentBox.find('iframe[data-id=' + id + ']')[0].src;
                        // ELEM.contentBox.find('iframe[data-id=' + id + ']')[0].src = src;
                        break;
                    case 'closeCurrent': //关闭当前
                        // if (clickIndex !== 0) {
                        //     element.tabDelete(ELEM.tabFilter, clickIndex);
                        // }
                        break;
                    case 'closeOther': //关闭其他
                        // ELEM.titleBox.children('li').each(function () {
                        //     var $t = $(this);
                        //     var id1 = $t.find('i.layui-tab-close').data('id');
                        //     if (id1 != id && id1 !== undefined) {
                        //         element.tabDelete(ELEM.tabFilter, $t.attr('lay-id'));
                        //     }
                        // });
                        break;
                    case 'closeAll': //全部关闭
                        // ELEM.titleBox.children('li').each(function () {
                        //     var $t = $(this);
                        //     if ($t.index() !== 0) {
                        //         element.tabDelete(ELEM.tabFilter, $t.attr('lay-id'));
                        //     }
                        // });
                        break;
                }
                //处理完后移除右键菜单的dom
                $context.remove();
            });
        });

        $(document).on('click', function () {
            $context.remove();
        });
    }
    return false;
});

    $('.demo').delegate('.layui-form:not(.layui-table-tool)','contextmenu', function (e) {

        //.layui-table-tool 工具条
        //contextmenu  .layui-border-box .layui-table-view
        // layer.alert("54444444444444");
//判断，如果存在右键菜单的div，则移除，保存页面上只存在一个
        if ($(document).find('div.admin-contextmenu').length > 0) {
            $(document).find('div.admin-contextmenu').remove();
        }
        //创建一个div
        var div = document.createElement('div');
        //设置一些属性
        div.className = 'admin-contextmenu';
        div.style.width = '130px';
        div.style.backgroundColor = 'white';

        var ul = '<ul>';
        ul += '<li data-target="refresh" title="刷新"><i class="fa fa-refresh" aria-hidden="true"></i> 刷新</li>';
        ul += '<li data-target="bind_datasource" title="绑定数据源"><i class="fa fa-refresh" aria-hidden="true"></i> 绑定数据源</li>';
        ul += '<li data-target="closeCurrent" title="关闭当前选项卡"><i class="fa fa-close" aria-hidden="true"></i> 关闭当前</li>';
        ul += '<li data-target="closeOther" title="关闭其他选项卡"><i class="fa fa-window-close-o" aria-hidden="true"></i> 关闭其他</li>';
        ul += '<li data-target="closeAll" title="关闭全部选项卡"><i class="fa fa-window-close-o" aria-hidden="true"></i> 全部关闭</li>';
        ul += '<li data-target="closeAlldddd" title="刷新页面"><i class="fa fa-window-close-o" aria-hidden="true"></i> 全部关闭</li>';
        ul += '<li data-target="edit-html-table" title="编辑"><i class="fa fa-window-close-o" aria-hidden="true"></i> 编辑</li>';
        ul += '</ul>';
        div.innerHTML = ul;
        div.style.top = e.pageY + 'px';
        div.style.left = e.pageX + 'px';
        //将dom添加到body的末尾
        document.getElementsByTagName('body')[0].appendChild(div);

        //获取当前点击选项卡的id值
        // var id = $($target).find('i.layui-tab-close').data('id');
        //获取当前点击选项卡的索引值
        // var clickIndex = $($target).attr('lay-id');
        var $context = $(document).find('div.admin-contextmenu');
        if ($context.length > 0) {
            $context.eq(0).children('ul').children('li').each(function () {
                var $that = $(this);
                //绑定菜单的点击事件
                $that.on('click', function () {
                    //获取点击的target值
                    var target = $that.data('target');
                    //
                    switch (target) {
                        case 'refresh': //刷新当前
                            // var src = ELEM.contentBox.find('iframe[data-id=' + id + ']')[0].src;
                            // ELEM.contentBox.find('iframe[data-id=' + id + ']')[0].src = src;
                            break;
                        case 'closeCurrent': //关闭当前
                            // if (clickIndex !== 0) {
                            //     element.tabDelete(ELEM.tabFilter, clickIndex);
                            // }
                            break;
                        case 'bind_datasource': //关闭当前
                            var index = layer.open({
                                type: 2
                                , area: ['900px', '400px']
                                , title: '数据源绑定'
                                , offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                                , id: 'addMenuLayer' + 1 //防止重复弹出
                                , content: '/static/vipadmin/page/table-data-checkbox-many.html'
                                , maxmin: true
                                , end: function () {
                                    // table_metadata_table.reload();
                                }//,shade: 0 //不显示遮罩
                                //,skin: 'layui-layer-molv'
                            });
                            break;
                        case 'closeOther': //关闭其他
                            // ELEM.titleBox.children('li').each(function () {
                            //     var $t = $(this);
                            //     var id1 = $t.find('i.layui-tab-close').data('id');
                            //     if (id1 != id && id1 !== undefined) {
                            //         element.tabDelete(ELEM.tabFilter, $t.attr('lay-id'));
                            //     }
                            // });
                            break;
                        case 'closeAll': //全部关闭
                            // ELEM.titleBox.children('li').each(function () {
                            //     var $t = $(this);
                            //     if ($t.index() !== 0) {
                            //         element.tabDelete(ELEM.tabFilter, $t.attr('lay-id'));
                            //     }
                            // });
                            break;
                        case 'edit-html-table': //编辑
                            layer.alert("编辑表格基本信息");
                            // ELEM.titleBox.children('li').each(function () {
                            //     var $t = $(this);
                            //     if ($t.index() !== 0) {
                            //         element.tabDelete(ELEM.tabFilter, $t.attr('lay-id'));
                            //     }
                            // });
// $(this)
                            layer.alert("编辑表格基本信息");
                            var index = layer.open({
                                type: 2
                                , area: ['900px', '400px']
                                , title: '编辑表格基本信息'
                                , offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                                , id: 'addMenuLayer' + 1 //防止重复弹出
                                , content: '/static/vipadmin/page/Edit-html-table.html'
                                , maxmin: true
                                , end: function () {
                                    // table_metadata_table.reload();
                                }//,shade: 0 //不显示遮罩
                                //,skin: 'layui-layer-molv'
                            });


                            break;
                    }
                    //处理完后移除右键菜单的dom
                    $context.remove();
                });
            });

            $(document).on('click', function () {
                $context.remove();
            });
        }
        return false;
    });
    // $('.demo').delegate('.layui-form .layui-table-tool','contextmenu', function (e) {
    //
    //     //.layui-table-tool 工具条
    //     //contextmenu  .layui-border-box .layui-table-view
    //     layer.alert("54444444444444");
    //
    //
    //
    //
    //
    //
    // });

    // $('body').delegate('#demo4','click', function (e) {
    //
    //     createTable();
    //
    //     $("#demo4").empty();
    // });

    contextmenuListen('.demo','.layui-progress-bar','contextmenu',function (e) {
        var currTableId=$(this).attr('id')
        //判断，如果存在右键菜单的div，则移除，保存页面上只存在一个
        if ($(document).find('div.admin-contextmenu').length > 0) {
            $(document).find('div.admin-contextmenu').remove();
        }
        //创建一个div
        var div = document.createElement('div');
        //设置一些属性
        div.className = 'admin-contextmenu';
        div.style.width = '130px';
        div.style.backgroundColor = 'white';
        var ul = '<ul>';
        ul += '<li data-target="refresh" title="刷新"><i class="fa fa-refresh" aria-hidden="true"></i> 刷新</li>';
        ul += '<li data-target="bind_datasource" title="绑定数据源"><i class="fa fa-refresh" aria-hidden="true"></i> 绑定数据源</li>';
        ul += '<li data-target="closeAlldddd" title="刷新页面"><i class="fa fa-window-close-o" aria-hidden="true"></i> 全部关闭</li>';
        ul += '<li data-target="edit-html-progress-bar" title="编辑"><i class="fa fa-window-close-o" aria-hidden="true"></i> 编辑</li>';
        ul += '</ul>';
        div.innerHTML = ul;
        div.style.top = e.pageY + 'px';
        div.style.left = e.pageX + 'px';
        //将dom添加到body的末尾
        document.getElementsByTagName('body')[0].appendChild(div);
        var $context = $(document).find('div.admin-contextmenu');
        if ($context.length > 0) {
            $context.eq(0).children('ul').children('li').each(function () {
                var $that = $(this);
                //绑定菜单的点击事件
                $that.on('click', function () {
                    //获取点击的target值
                    var target = $that.data('target');
                    //
                    switch (target) {
                        case 'refresh': //刷新当前
                            // var src = ELEM.contentBox.find('iframe[data-id=' + id + ']')[0].src;
                            // ELEM.contentBox.find('iframe[data-id=' + id + ']')[0].src = src;
                            break;
                        case 'closeCurrent': //关闭当前
                            // if (clickIndex !== 0) {
                            //     element.tabDelete(ELEM.tabFilter, clickIndex);
                            // }
                            break;
                        case 'bind_datasource': //关闭当前
                            var index = layer.open({
                                type: 2
                                , area: ['900px', '400px']
                                , title: '数据源绑定'
                                , offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                                , id: 'addMenuLayer' + 1 //防止重复弹出
                                , content: '/static/vipadmin/page/table-data-checkbox-many.html'
                                , maxmin: true
                                , end: function () {
                                    // table_metadata_table.reload();
                                }//,shade: 0 //不显示遮罩
                                //,skin: 'layui-layer-molv'
                            });
                            break;
                        case 'closeOther': //关闭其他
                            // ELEM.titleBox.children('li').each(function () {
                            //     var $t = $(this);
                            //     var id1 = $t.find('i.layui-tab-close').data('id');
                            //     if (id1 != id && id1 !== undefined) {
                            //         element.tabDelete(ELEM.tabFilter, $t.attr('lay-id'));
                            //     }
                            // });
                            break;
                        case 'closeAll': //全部关闭
                            // ELEM.titleBox.children('li').each(function () {
                            //     var $t = $(this);
                            //     if ($t.index() !== 0) {
                            //         element.tabDelete(ELEM.tabFilter, $t.attr('lay-id'));
                            //     }
                            // });
                            break;
                        case 'edit-html-progress-bar': //编辑
                            $('#html_id_progress-bar_id').val(currTableId);
                            // alert('dangqian 隐藏ID:'+$('#html_id_table_id').val());
                            var index = layer.open({
                                type: 2
                                , area: ['900px', '400px']
                                , title: '编辑进度条基本信息'
                                , offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                                , id: 'addMenuLayer' + 1 //防止重复弹出
                                , content: '/static/vipadmin/page/Edit-html-progress-bar.html'
                                , maxmin: true
                                , end: function () {
                                    // table_metadata_table.reload();
                                    element.render('progress');
                                }//,shade: 0 //不显示遮罩
                                //,skin: 'layui-layer-molv'
                            });
                            break;
                    }
                    //处理完后移除右键菜单的dom
                    $context.remove();
                });
            });

            $(document).on('click', function () {
                $context.remove();
            });
        }
        return false;
    });

    contextmenuListen('.demo','.layui-carousel','contextmenu',function (e) {
        var currTableId=$(this).attr('id')
        //判断，如果存在右键菜单的div，则移除，保存页面上只存在一个
        if ($(document).find('div.admin-contextmenu').length > 0) {
            $(document).find('div.admin-contextmenu').remove();
        }
        //创建一个div
        var div = document.createElement('div');
        //设置一些属性
        div.className = 'admin-contextmenu';
        div.style.width = '130px';
        div.style.backgroundColor = 'white';
        var ul = '<ul>';
        ul += '<li data-target="refresh" title="刷新"><i class="fa fa-refresh" aria-hidden="true"></i> 刷新</li>';
        ul += '<li data-target="bind_datasource" title="绑定数据源"><i class="fa fa-refresh" aria-hidden="true"></i> 绑定数据源</li>';
        ul += '<li data-target="closeAlldddd" title="刷新页面"><i class="fa fa-window-close-o" aria-hidden="true"></i> 全部关闭</li>';
        ul += '<li data-target="edit-html-carousel" title="编辑"><i class="fa fa-window-close-o" aria-hidden="true"></i> 编辑</li>';
        ul += '</ul>';
        div.innerHTML = ul;
        div.style.top = e.pageY + 'px';
        div.style.left = e.pageX + 'px';
        //将dom添加到body的末尾
        document.getElementsByTagName('body')[0].appendChild(div);
        var $context = $(document).find('div.admin-contextmenu');
        if ($context.length > 0) {
            $context.eq(0).children('ul').children('li').each(function () {
                var $that = $(this);
                //绑定菜单的点击事件
                $that.on('click', function () {
                    //获取点击的target值
                    var target = $that.data('target');
                    //
                    switch (target) {
                        case 'refresh': //刷新当前

                            break;
                        case 'closeCurrent': //关闭当前

                            break;
                        case 'bind_datasource': //关闭当前
                            var index = layer.open({
                                type: 2
                                , area: ['900px', '400px']
                                , title: '数据源绑定'
                                , offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                                , id: 'addMenuLayer' + 1 //防止重复弹出
                                , content: '/static/vipadmin/page/table-data-checkbox-many.html'
                                , maxmin: true
                                , end: function () {
                                    // table_metadata_table.reload();
                                }
                            });
                            break;
                        case 'closeOther': //关闭其他

                            break;
                        case 'closeAll': //全部关闭

                            break;
                        case 'edit-html-carousel': //编辑
                            $('#html_id_carousel_id').val(currTableId);
                            // alert('dangqian 隐藏ID:'+$('#html_id_table_id').val());
                            var index = layer.open({
                                type: 2
                                , area: ['900px', '400px']
                                , title: '编辑轮播图基本信息'
                                , offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                                , id: 'addMenuLayer' + 1 //防止重复弹出
                                , content: '/static/vipadmin/page/Edit-html-carousel.html'
                                , maxmin: true
                                , end: function () {
                                    // table_metadata_table.reload();
                                    element.render('progress');
                                }
                            });
                            break;
                    }
                    //处理完后移除右键菜单的dom
                    $context.remove();
                });
            });

            $(document).on('click', function () {
                $context.remove();
            });
        }
        return false;
    });

    contextmenuListen('.demo','table','contextmenu',function (e) {
        // var $tte = $(this);
        var currTableId=$(this).attr('id')
        //判断，如果存在右键菜单的div，则移除，保存页面上只存在一个
        if ($(document).find('div.admin-contextmenu').length > 0) {
            $(document).find('div.admin-contextmenu').remove();
        }
        //创建一个div
        var div = document.createElement('div');
        //设置一些属性
        div.className = 'admin-contextmenu';
        div.style.width = '130px';
        div.style.backgroundColor = 'white';

        var ul = '<ul>';
        ul += '<li data-target="refresh" title="刷新"><i class="fa fa-refresh" aria-hidden="true"></i> 刷新</li>';
        ul += '<li data-target="bind_datasource" title="绑定数据源"><i class="fa fa-refresh" aria-hidden="true"></i> 绑定数据源</li>';
        ul += '<li data-target="closeAlldddd" title="刷新页面"><i class="fa fa-window-close-o" aria-hidden="true"></i> 全部关闭</li>';
        ul += '<li data-target="edit-html-table" title="编辑"><i class="fa fa-window-close-o" aria-hidden="true"></i> 编辑</li>';
        ul += '</ul>';
        div.innerHTML = ul;
        div.style.top = e.pageY + 'px';
        div.style.left = e.pageX + 'px';
        //将dom添加到body的末尾
        document.getElementsByTagName('body')[0].appendChild(div);

        //获取当前点击选项卡的id值
        // var id = $($target).find('i.layui-tab-close').data('id');
        //获取当前点击选项卡的索引值
        // var clickIndex = $($target).attr('lay-id');
        var $context = $(document).find('div.admin-contextmenu');
        if ($context.length > 0) {
            $context.eq(0).children('ul').children('li').each(function () {
                var $that = $(this);
                //绑定菜单的点击事件
                $that.on('click', function () {
                    //获取点击的target值
                    var target = $that.data('target');
                    //
                    switch (target) {
                        case 'refresh': //刷新当前
                            // var src = ELEM.contentBox.find('iframe[data-id=' + id + ']')[0].src;
                            // ELEM.contentBox.find('iframe[data-id=' + id + ']')[0].src = src;
                            break;
                        case 'closeCurrent': //关闭当前
                            // if (clickIndex !== 0) {
                            //     element.tabDelete(ELEM.tabFilter, clickIndex);
                            // }
                            break;
                        case 'bind_datasource': //关闭当前
                            var index = layer.open({
                                type: 2
                                , area: ['900px', '400px']
                                , title: '数据源绑定'
                                , offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                                , id: 'addMenuLayer' + 1 //防止重复弹出
                                , content: '/static/vipadmin/page/table-data-checkbox-many.html'
                                , maxmin: true
                                , end: function () {
                                    // table_metadata_table.reload();
                                }//,shade: 0 //不显示遮罩
                                //,skin: 'layui-layer-molv'
                            });
                            break;
                        case 'closeOther': //关闭其他
                            // ELEM.titleBox.children('li').each(function () {
                            //     var $t = $(this);
                            //     var id1 = $t.find('i.layui-tab-close').data('id');
                            //     if (id1 != id && id1 !== undefined) {
                            //         element.tabDelete(ELEM.tabFilter, $t.attr('lay-id'));
                            //     }
                            // });
                            break;
                        case 'closeAll': //全部关闭
                            // ELEM.titleBox.children('li').each(function () {
                            //     var $t = $(this);
                            //     if ($t.index() !== 0) {
                            //         element.tabDelete(ELEM.tabFilter, $t.attr('lay-id'));
                            //     }
                            // });
                            break;
                        case 'edit-html-table': //编辑
                            $('#html_id_table_id').val(currTableId);
                            // alert('dangqian 隐藏ID:'+$('#html_id_table_id').val());
                            var index = layer.open({
                                type: 2
                                , area: ['900px', '400px']
                                , title: '编辑表格基本信息'
                                , offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                                , id: 'addMenuLayer' + 1 //防止重复弹出
                                , content: '/static/vipadmin/page/Edit-html-table.html'
                                , maxmin: true
                                , end: function () {
                                    // table_metadata_table.reload();
                                }//,shade: 0 //不显示遮罩
                                //,skin: 'layui-layer-molv'
                            });
                            break;
                    }
                    //处理完后移除右键菜单的dom
                    $context.remove();
                });
            });

            $(document).on('click', function () {
                $context.remove();
            });
        }
        return false;
    });

    //     createTable();
    //     $("#demo4").empty();
    //     //.layui-table-tool 工具条
    //     //contextmenu  .layui-border-box .layui-table-view
    //     // layer.alert("54444444444444");
    //
    // });

    contextmenuListen('.demo','button','contextmenu',function (e) {
        var currButtonId=$(this).attr('id')
        //判断，如果存在右键菜单的div，则移除，保存页面上只存在一个
        if ($(document).find('div.admin-contextmenu').length > 0) {
            $(document).find('div.admin-contextmenu').remove();
        }
        //创建一个div
        var div = document.createElement('div');
        //设置一些属性
        div.className = 'admin-contextmenu';
        div.style.width = '130px';
        div.style.backgroundColor = 'white';

        var ul = '<ul>';
        ul += '<li data-target="refresh" title="刷新"><i class="fa fa-refresh" aria-hidden="true"></i> 刷新</li>';
        ul += '<li data-target="bind_datasource" title="绑定数据源"><i class="fa fa-refresh" aria-hidden="true"></i> 绑定数据源</li>';
        ul += '<li data-target="closeAlldddd" title="刷新页面"><i class="fa fa-window-close-o" aria-hidden="true"></i> 全部关闭</li>';
        ul += '<li data-target="edit-html-button" title="编辑"><i class="fa fa-window-close-o" aria-hidden="true"></i> 编辑</li>';
        ul += '</ul>';
        div.innerHTML = ul;
        div.style.top = e.pageY + 'px';
        div.style.left = e.pageX + 'px';
        //将dom添加到body的末尾
        document.getElementsByTagName('body')[0].appendChild(div);
        //获取当前点击选项卡的id值
        // var id = $($target).find('i.layui-tab-close').data('id');
        //获取当前点击选项卡的索引值
        // var clickIndex = $($target).attr('lay-id');
        var $context = $(document).find('div.admin-contextmenu');
        if ($context.length > 0) {
            $context.eq(0).children('ul').children('li').each(function () {
                var $that = $(this);
                //绑定菜单的点击事件
                $that.on('click', function () {
                    //获取点击的target值
                    var target = $that.data('target');
                    //
                    switch (target) {
                        case 'refresh': //刷新当前
                            // var src = ELEM.contentBox.find('iframe[data-id=' + id + ']')[0].src;
                            // ELEM.contentBox.find('iframe[data-id=' + id + ']')[0].src = src;
                            break;
                        case 'closeCurrent': //关闭当前
                            // if (clickIndex !== 0) {
                            //     element.tabDelete(ELEM.tabFilter, clickIndex);
                            // }
                            break;
                        case 'bind_datasource': //关闭当前
                            var index = layer.open({
                                type: 2
                                , area: ['900px', '400px']
                                , title: '数据源绑定'
                                , offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                                , id: 'addMenuLayer' + 1 //防止重复弹出
                                , content: '/static/vipadmin/page/table-data-checkbox-many.html'
                                , maxmin: true
                                , end: function () {
                                    // table_metadata_table.reload();
                                }//,shade: 0 //不显示遮罩
                                //,skin: 'layui-layer-molv'
                            });
                            break;
                        case 'closeOther': //关闭其他
                            // ELEM.titleBox.children('li').each(function () {
                            //     var $t = $(this);
                            //     var id1 = $t.find('i.layui-tab-close').data('id');
                            //     if (id1 != id && id1 !== undefined) {
                            //         element.tabDelete(ELEM.tabFilter, $t.attr('lay-id'));
                            //     }
                            // });
                            break;
                        case 'closeAll': //全部关闭
                            // ELEM.titleBox.children('li').each(function () {
                            //     var $t = $(this);
                            //     if ($t.index() !== 0) {
                            //         element.tabDelete(ELEM.tabFilter, $t.attr('lay-id'));
                            //     }
                            // });
                            break;
                        case 'edit-html-button': //编辑
                            $('#html_id_button_id').val(currButtonId);
                            // alert('dangqian 隐藏ID:'+$('#html_id_table_id').val());
                            var index = layer.open({
                                type: 2
                                , area: ['900px', '400px']
                                , title: '编辑按钮基本信息'
                                , offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                                , id: 'addMenuLayer' + 1 //防止重复弹出
                                , content: '/static/vipadmin/page/Edit-html-button.html'
                                , maxmin: true
                                , end: function () {
                                    // table_metadata_table.reload();
                                }//,shade: 0 //不显示遮罩
                                //,skin: 'layui-layer-molv'
                            });
                            break;
                    }
                    //处理完后移除右键菜单的dom
                    $context.remove();
                });
            });

            $(document).on('click', function () {
                $context.remove();
            });
        }
        return false;
    });






    contextmenuListen('.demo','.layui-form','contextmenu',function (e) {

        //.layui-table-tool 工具条
        //contextmenu  .layui-border-box .layui-table-view
        // layer.alert("54444444444444");

    });





function contextmenuListen(liser,selecter,event,func){
    $(liser).delegate(selecter,event,func);
}
// var divsss=$('*[lay-id="demo4"]');
var divsss=$("div[lay-id=demo4]");

$(divsss).on('contextmenu', function (e) {
      // layer.alert("54444444444444");
        // var e=$(this);
        //判断，如果存在右键菜单的div，则移除，保存页面上只存在一个
        if ($(document).find('div.admin-contextmenu').length > 0) {
            $(document).find('div.admin-contextmenu').remove();
        }
        //创建一个div
        var div = document.createElement('div');
        //设置一些属性
        div.className = 'admin-contextmenu';
        div.style.width = '130px';
        div.style.backgroundColor = 'white';

        var ul = '<ul>';
        ul += '<li data-target="refresh" title="刷新"><i class="fa fa-refresh" aria-hidden="true"></i> 刷新</li>';
        ul += '<li data-target="bind_datasource" title="绑定数据源"><i class="fa fa-refresh" aria-hidden="true"></i> 绑定数据源</li>';
        ul += '<li data-target="closeCurrent" title="关闭当前选项卡"><i class="fa fa-close" aria-hidden="true"></i> 关闭当前</li>';
        ul += '<li data-target="closeOther" title="关闭其他选项卡"><i class="fa fa-window-close-o" aria-hidden="true"></i> 关闭其他</li>';
        ul += '<li data-target="closeAll" title="关闭全部选项卡"><i class="fa fa-window-close-o" aria-hidden="true"></i> 全部关闭</li>';
        ul += '<li data-target="closeAlldddd" title="刷新页面"><i class="fa fa-window-close-o" aria-hidden="true"></i> 全部关闭</li>';
        ul += '<li data-target="edit-html-table" title="编辑"><i class="fa fa-window-close-o" aria-hidden="true"></i> 编辑</li>';
        ul += '</ul>';
        div.innerHTML = ul;
        div.style.top = e.pageY + 'px';
        div.style.left = e.pageX + 'px';
        //将dom添加到body的末尾
        document.getElementsByTagName('body')[0].appendChild(div);

        //获取当前点击选项卡的id值
        // var id = $($target).find('i.layui-tab-close').data('id');
        //获取当前点击选项卡的索引值
        // var clickIndex = $($target).attr('lay-id');
        var $context = $(document).find('div.admin-contextmenu');
        if ($context.length > 0) {
            $context.eq(0).children('ul').children('li').each(function () {
                var $that = $(this);
                //绑定菜单的点击事件
                $that.on('click', function () {
                    //获取点击的target值
                    var target = $that.data('target');
                    //
                    switch (target) {
                        case 'refresh': //刷新当前
                            // var src = ELEM.contentBox.find('iframe[data-id=' + id + ']')[0].src;
                            // ELEM.contentBox.find('iframe[data-id=' + id + ']')[0].src = src;
                            break;
                        case 'closeCurrent': //关闭当前
                            // if (clickIndex !== 0) {
                            //     element.tabDelete(ELEM.tabFilter, clickIndex);
                            // }
                            break;
                        case 'bind_datasource': //关闭当前
                            var index = layer.open({
                                type: 2
                                , area: ['900px', '400px']
                                , title: '数据源绑定'
                                , offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                                , id: 'addMenuLayer' + 1 //防止重复弹出
                                , content: '/static/vipadmin/page/table-data-checkbox-many.html'
                                , maxmin: true
                                , end: function () {
                                    // table_metadata_table.reload();
                                }//,shade: 0 //不显示遮罩
                                //,skin: 'layui-layer-molv'
                            });
                            break;
                        case 'closeOther': //关闭其他
                            // ELEM.titleBox.children('li').each(function () {
                            //     var $t = $(this);
                            //     var id1 = $t.find('i.layui-tab-close').data('id');
                            //     if (id1 != id && id1 !== undefined) {
                            //         element.tabDelete(ELEM.tabFilter, $t.attr('lay-id'));
                            //     }
                            // });
                            break;
                        case 'closeAll': //全部关闭
                            // ELEM.titleBox.children('li').each(function () {
                            //     var $t = $(this);
                            //     if ($t.index() !== 0) {
                            //         element.tabDelete(ELEM.tabFilter, $t.attr('lay-id'));
                            //     }
                            // });
                            break;
                        case 'edit-html-table': //编辑
                            layer.alert("编辑表格基本信息");
                            // ELEM.titleBox.children('li').each(function () {
                            //     var $t = $(this);
                            //     if ($t.index() !== 0) {
                            //         element.tabDelete(ELEM.tabFilter, $t.attr('lay-id'));
                            //     }
                            // });
                            var index = layer.open({
                                type: 2
                                , area: ['900px', '400px']
                                , title: '编辑表格基本信息'
                                , offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                                , id: 'addMenuLayer' + 1 //防止重复弹出
                                , content: '/static/vipadmin/page/Edit-html-table.html'
                                , maxmin: true
                                , end: function () {
                                    // table_metadata_table.reload();
                                }//,shade: 0 //不显示遮罩
                                //,skin: 'layui-layer-molv'
                            });
                            break;
                    }
                    //处理完后移除右键菜单的dom
                    $context.remove();
                });
            });

            $(document).on('click', function () {
                $context.remove();
            });
        }
        return false;
    });




  });

</script>
</body>
</html>
        </textarea>
        <input type="hidden" name="html" id="LAY_demoCodes">
      </div>
      <div class="site-demo-btn">
        <button type="button" class="layui-btn" id="LAY_demo_run">运行代码</button>
      </div>
      <div class="site-demo-btn1">
        <button type="button" class="layui-btn" id="LAY_demo_runHtml_show_code">开启关闭</button>
      </div>
      <div class="site-demo-btn2">
        <button type="button" class="layui-btn" id="LAY_demo_runHtml_show_html">开启关闭</button>
      </div>
    </div>
    </form>
    <div class="site-demo-result" id="site-demo-result">
      <iframe frameborder="0" id="LAY_demo" name="LAY_demo"></iframe>
    </div>
  </div>
  <div class="layui-footer footer footer-demo">
</div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<div class="site-tree-mobile layui-hide">
  <i class="layui-icon">&#xe602;</i>
</div>
<div class="site-mobile-shade"></div>
<script src="../layui/layui.js?t=1545041465480" charset="utf-8"></script>
<script>
window.global = {
  pageType: 'demo'
  ,preview: function(){
    var preview = document.getElementById('LAY_preview');
    return preview ? preview.innerHTML : '';
  }()
};
layui.config({
  base: '../js/'
  ,version: '1545041465480'
}).use('global');
</script>
 
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?d214947968792b839fd669a4decaaffc";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

</div>
</body>
</html>